<template>
	<div class="item" @click="test">
		<div class="wrapper">
			<div class="up">
				<div class="left" ref='img' >
					<div class="left_pic" :style="{backgroundImage: `url(${album_info.info[0].photo_url})`}"></div>
				</div>
				<div class="right">
					<div class="right_up" ref='img' >
						<div class="right_up_pic" :style="{backgroundImage: `url(${album_info.info[1].photo_url})`}"></div>
					</div>
					<div class="right_down" ref='img' >
						<div class="right_down_pic" :style="{backgroundImage: `url(${album_info.info[2].photo_url})`}"></div>
					</div>
				</div>
			</div>
			<div class="down">
				<div class="down_left">
					<div class="name">
						{{album_info.album_name}}
					</div>
					<div class="num">
						{{album_info.num}}张
					</div>
				</div>
				<div class="down_right">
					<div class="follow_btn">
						关注专辑
					</div>
					<div class="functions">
						<i class="iconfont icon-fenxiang"></i>
						<i class="iconfont icon-aixin"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// info: {},
				
			}
		},
		props: {
			album_info:Object,
			index:Number,
		},
		// computed:{
		// 	src_arr(){
		// 		return 
		// 	}
		// },
		methods:{
			test(){
				console.log(this.album_info)
			}
		},
		mounted() {
			
		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 25%;
		padding-top: 22%;
		position: relative;
		
		.wrapper {
			padding: 2%;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.up {
				display: flex;

				height: 74%;
				background-color: pink;
				overflow: hidden;
				.left {
					width: 60%;
					height: 100%;
					background-color: gray;
					overflow: hidden;

					.left_pic{
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						transition: all .5s;
					}
					.left_pic:hover{
						transform: scale(1.1);
					}
					img{
						width: 100%;
						height: 100%;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 40%;
					height: 100%;
					background-color: lightgray;
					padding-left: 2%;
					.right_up {
						background-color: lightgray;
						width: 100%;
						height: 48%;
						overflow: hidden;

						.right_up_pic{
							width: 100%;
							height: 100%;
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							transition: all .5s;
						}
						.right_up_pic:hover{
							transform: scale(1.1);
						}
						img{
							width: 100%;
							// height: 100%;
						}
					}

					.right_down {
						
						background-color: lightgray;
						width: 100%;
						height: 48%;
						overflow: hidden;

						img{
							width: 100%;
							// height: 100%;
						}
						.right_down_pic{
							width: 100%;
							height: 100%;
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							transition: all .5s;
						}
						.right_down_pic:hover{
							transform: scale(1.1);
						}
					}
					
				}
			}

			.down {
				padding: 2%;
				height: 26%;
				background-color: white;
				display: flex;
				justify-content: space-between;
				font-family: "microsoft yahei";
				.down_left{
					font-size: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-weight: 700;
						font-size: 12px;
					}
					.num{
						font-size: 12px;
					}
				}
				.down_right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.follow_btn{
						width: 100%;
						padding: 0 2%;
						border-radius: 20px;
						border: 1PX solid black;
						margin-right: 5px;
					}
					.follow_btn:hover{
						border: 1PX solid #49c5b6;
						color: #49c5b6;
						
					}
					.functions{
						display: flex;
						justify-content: space-between;
					}
					font-size: 12px;
				}
			}
		}
	}
</style>
